<template>
  <view
    class="admin-header"
    :style="{
      background: `url(${
        asyncImgs.service_home ? asyncImgs.service_home.home_bg || '' : ''
      }) 0 0 / 100% 100% no-repeat`,
    }"
  >
    <view class="admin-box">
      <view
        class="nav"
        :style="{
          paddingTop: statusBarHeight + 'px',
        }"
      >
        <view class="nav-head">
          <!-- #ifndef MP-ALIPAY -->
          <!-- <image :src="asyncImgs.common.back" mode="widthFix" /> -->
          <div
            @click="$utils.goBack()"
            v-if="asyncImgs && asyncImgs.common"
            style="
              font-size: 32px;
              width: 44px;
              height: 44px;
              line-height: 44px;
              text-align: center;
              color: #000;
            "
            class="iconfont icon-arrow-left"
          ></div>
          <!-- #endif -->
        </view>
      </view>

      <view
        class="header"
        :style="[{ paddingTop: 'calc(' + statusBarHeight + 'px + 44px)' }]"
      >
        <view class="user">
          <view
            class="userLet"
            @click="$utils.toUrl('/service-home/user/index')"
          >
            <div
              class="iconfont icon-androidgengduo"
              style="font-size: 48rpx; text-align: center"
            ></div>
            <image
              class="img"
              :src="pageData.workerInfo.logo"
              mode="aspectFill"
            ></image>

            <view class="txt">
              <view class="shopName">{{ pageData.workerInfo.name }}</view>
              <view class="name">
                {{ pageData.levelName }}
              </view>
            </view>
          </view>

          <view class="userRig">
            <view @click="switchStatus('show')" class="">
              <div
                v-if="pageData.workerInfo.open_status"
                class="iconfont icon-success-fill font-24 u-m-r-4"
                style="color: #12b315"
              ></div>
              <div
                v-else
                class="iconfont icon-reduce-fill font-24 u-m-r-4"
                style="color: #f0250e"
              ></div>

              <div>{{ pageData.workerInfo.open_status ? "上线" : "下线" }}</div>
              <div
                v-if="!showStatus"
                class="iconfont icon-arrow-down-filling"
              ></div>
              <div v-else class="iconfont icon-arrow-up-filling"></div>
            </view>

            <view v-if="showStatus" class="">
              <div @click="switchStatus('switch')" class="flex-y-center">
                <div
                  v-if="!pageData.workerInfo.open_status"
                  class="iconfont icon-success-fill font-24 u-m-r-4"
                  style="color: #12b315"
                ></div>
                <div
                  v-else
                  class="iconfont icon-reduce-fill font-24 u-m-r-4"
                  style="color: #f0250e"
                ></div>
                <div>
                  {{ !pageData.workerInfo.open_status ? "上线" : "下线" }}
                </div>
              </div>
            </view>
          </view>
        </view>

        <view class="number">
          <view class="item">
            <view class="em">浏览量</view>
            <view class="num">{{ pageData.workerInfo.visited }}</view>
            <view class="em"> 昨日 {{ pageData.yesterday.visited }} </view>
          </view>

          <view class="item">
            <view class="em">订单量</view>
            <view class="num">{{ pageData.orderCount }}</view>
            <view class="em"> 昨日 {{ pageData.yesterday.orderCount }} </view>
          </view>

          <view class="item">
            <view class="em">收藏量</view>
            <view class="num">{{ pageData.favCount }}</view>
            <view class="em"> 昨日 {{ pageData.yesterday.favCount }} </view>
          </view>
        </view>

        <view class="" style="height: 70rpx"> </view>
      </view>
    </view>

    <view class="list" v-if="isToggle">
      <view
        class="item"
        @click="$utils.toUrl('/service-home/commission/index')"
      >
        <view class="box">
          <view class="em">累计佣金</view>
          <view class="des">
            <view class="desView">
              <text class="">
                {{ $utils.priceFilter(pageData.total_price)[0] }}
              </text>
              <text style="font-size: 28rpx">
                {{ $utils.priceFilter(pageData.total_price)[1] }}
              </text>
            </view>
          </view>
          <view class="em">昨日 {{ pageData.yesterday.total_price }}</view>
        </view>
      </view>
      <view class="item">
        <view
          class="box"
          @click="$utils.toUrl('/service-home/commission/index')"
        >
          <view class="em">累计提现</view>
          <view class="des">
            <view class="desView">
              <text class="">
                {{ $utils.priceFilter(pageData.total_cash)[0] }}
              </text>
              <text style="font-size: 28rpx">
                {{ $utils.priceFilter(pageData.total_cash)[1] }}
              </text>
            </view>
          </view>
          <view class="em">昨日 {{ pageData.yesterday.total_cash }}</view>
        </view>
      </view>
      <view
        class="item"
        @click="$utils.toUrl('/service-home/commission/index')"
      >
        <view class="box">
          <view class="em">未结算</view>
          <view class="des">
            <view class="desView">
              <text class="">
                {{ $utils.priceFilter(pageData.is_price_no)[0] }}
              </text>
              <text style="font-size: 28rpx">
                {{ $utils.priceFilter(pageData.is_price_no)[1] }}
              </text>
            </view>
          </view>
          <view class="em">昨日 {{ pageData.yesterday.is_price_no }}</view>
        </view>
      </view>
      <view
        class="item"
        @click="$utils.toUrl('/service-home/commission/index')"
      >
        <view class="box">
          <view class="em">已结算</view>
          <view class="des">
            <view class="desView">
              <text class="">
                {{ $utils.priceFilter(pageData.is_price_yes)[0] }}
              </text>
              <text style="font-size: 28rpx">
                {{ $utils.priceFilter(pageData.is_price_yes)[1] }}
              </text>
            </view>
          </view>
          <view class="em">昨日 {{ pageData.yesterday.is_price_yes }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import serviceHome from "@/api/service-home";
export default {
  props: {
    showEndTime: {
      type: Boolean,
      default: false,
    },

    isToggle: {
      type: Boolean,
      default: false,
    },

    data: {
      type: Object,
      default() {
        return null;
      },
    },
    pageData: {
      type: Object,
      default() {
        return null;
      },
    },
  },

  data() {
    return {
      show: true,
      showTs: true,
      showStatus: false,
    };
  },

  watch: {
    pageData: {
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.init();
          });
        }
      },
      immediate: true,
    },
  },

  methods: {
    init() {
      uni
        .createSelectorQuery()
        .in(this)
        .select(".admin-box")
        .boundingClientRect((data) => {
          try {
            const res = uni.getSystemInfoSync();
            this.$nextTick(() => {
              this.$emit("update:info", {
                top: data.height + "px",
                height: res.windowHeight - data.height + "px",
              });
            });
          } catch (e) {
            // error
          }
        })
        .exec();
    },
    async switchStatus(type) {
      switch (type) {
        case "switch":
          let pageData = JSON.parse(JSON.stringify(this.pageData));

          await serviceHome.openStatus(
            { status: Number(!pageData.workerInfo.open_status) },
            true
          );
          pageData.workerInfo.open_status = Number(
            !pageData.workerInfo.open_status
          );
          this.showStatus = !this.showStatus;
          this.$emit("update:pageData", pageData);
          break;

        default:
          this.showStatus = !this.showStatus;
          break;
      }
    },
  },

  mounted() {},
};
</script>

<style lang="less" scoped>
.admin-box {
  box-sizing: content-box;
}
.nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9;
  padding: 0 8rpx;
  transition: 0.3s all;

  .nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
  }

  image {
    width: 19rpx;
  }
}

.admin-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
}

.user {
  display: flex;
  align-items: center;
  padding: 30rpx 48rpx 0 38rpx;
}

.userLet {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;

  .img {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
  }

  .txt {
    flex: 1;
    overflow: hidden;
    margin-left: 20rpx;
  }
}

.shopName {
  font-size: 30rpx;
  font-weight: 600;
}

.name {
  font-size: 24rpx;
  color: #8c8c8c;
}

.shopName,
.name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.number {
  display: flex;
  padding: 40rpx 0 0;

  .item {
    padding: 0 5rpx;
    width: 33.33%;
    overflow: hidden;
    text-align: center;
  }

  .num {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 4rpx 0 8rpx;
    font-size: 36rpx;
    font-weight: 600;
    overflow: hidden;

    .s2 {
      padding-bottom: 4rpx;
      font-size: 24rpx;
    }
  }

  .em {
    font-size: 26rpx;
    color: #8c8c8c;
  }
}

.list {
  margin-top: -10rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 24rpx;

  .item {
    margin-bottom: 22rpx;
    width: 340rpx;
    padding: 24rpx;
    background: #fff;
    border-radius: 16rpx;
  }

  .box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16rpx;
  }

  .em {
    line-height: 36rpx;
    font-size: 26rpx;
    color: #8c8c8c;
  }

  .des {
    padding: 4rpx 0 6rpx;
    overflow: hidden;

    .desView {
      font-size: 36rpx;
      font-weight: 600;
      color: #262626;
      line-height: 50rpx;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.userRig {
  position: relative;
  > view:nth-child(1) {
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    background: #fff;
    border-radius: 40rpx;
    font-size: 24rpx;
    .icon-arrow-down-filling,
    .icon-arrow-up-filling {
      font-size: 20rpx;
      color: #b6b6b6;
      margin-left: 10rpx;
    }
  }
  > view:nth-child(2) {
    position: absolute;
    left: 50%;
    top: calc(100% + 20rpx);
    transform: translateX(-50%);
    width: 100%;

    background: #fff;
    border-radius: 10rpx;
    padding: 10rpx 20rpx;
    font-size: 24rpx;
    &::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -100%);

      border: 10rpx solid #fff;
      border-top-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
    }
  }
}

.showEndTime {
  display: flex;
  // align-items: center;
  padding: 14rpx 10rpx 14rpx 34rpx;
  // height: 84rpx;
  background: #fef7e2;
  color: #ec9d24;

  .icon-prompt-fill {
    font-size: 36rpx;
  }

  .icon-close {
    font-size: 40rpx;
  }

  .txt {
    flex: 1;
    overflow: hidden;
    padding: 0 10rpx 0 20rpx;
    font-weight: bold;
    font-size: 26rpx;

    text {
      text-decoration: underline;
    }
  }
}
</style>
